<script setup lang="ts">
import VPHomeHero from './VPHomeHero.vue';
import VPHomeFeatures from './VPHomeFeatures.vue';
import { inject, Ref } from 'vue';

const curTheme = inject('current-theme') as Ref<string>;
</script>

<template>
    <div class="VPHome">
        <slot name="before-feature" />
        <VPHomeHero />

        <slot name="home-hero-after" />

        <slot name="home-features-before" />
        <VPHomeFeatures>
            <template #before-feature>
                <div class="farris-doc-character--bottom-bg">
                    <img src="/assets/bg-character-bottom.png" class="img-block" style="max-height:97px" v-if="curTheme != 'dark'" />
                    <img src="/assets/bg-character-bottom-dark.png" class="img-block" style="max-height:97px" v-if="curTheme == 'dark'" />
                </div>
                <div class="farris-doc-cmp-intro">
                    <div class="farris-doc-resource--header cmp-intro--header">
                        <h2>丰富的设计资源</h2>
                        <p>提供配套丰富的 F arris Design 相关设计资源和设计工具</p>
                        <div class="farris-doc-resource--header-bg"></div>
                    </div>
                </div>
            </template>
            <template #after-feature>
                <div class="farris-doc-resource--top-bg">
                    <img src="/assets/bg-resource-top.png" class="img-block" v-if="curTheme != 'dark'" />
                    <img src="/assets/bg-resource-top-dark.png" class="img-block" v-if="curTheme == 'dark'" />
                </div>
            </template>
        </VPHomeFeatures>

        <div class="farris-doc-resource">
            <div class="farris-doc-resource-wrapper">
                <div class="farris-doc-resource-container">
                    <div class="farris-doc-resource--header">
                        <h2>丰富的设计资源</h2>
                        <p>提供配套丰富的 F arris Design 相关设计资源和设计工具</p>
                        <div class="farris-doc-resource--header-bg"></div>
                    </div>
                    <div class="farris-doc-resource-container--row">
                        <div class="resource-item">
                            <div class="farris-doc-resource-card">
                                <div class="resource-bg resource001"></div>
                                <div class="farris-doc-resource-card-title">
                                    <a>Farris Design Web Sketch组件</a>
                                </div>
                                <div class="farris-doc-resource-card-content">Web端Sketch组件包</div>
                            </div>
                        </div>
                        <div class="resource-item">
                            <div class="farris-doc-resource-card">
                                <div class="resource-bg resource002"></div>
                                <div class="farris-doc-resource-card-title">
                                    <a>Farris Design Mobile Sketch组件</a>
                                </div>
                                <div class="farris-doc-resource-card-content">移动端Sketch组件包</div>
                            </div>
                        </div>
                        <div class="resource-item">
                            <div class="farris-doc-resource-card">
                                <div class="resource-bg resource003"></div>
                                <div class="farris-doc-resource-card-title">
                                    <a>Farris Design Web Axure元件库</a>
                                </div>
                                <div class="farris-doc-resource-card-content">在Axure中使用的元件库</div>
                            </div>
                        </div>
                        <div class="resource-item">
                            <div class="farris-doc-resource-card">
                                <div class="resource-bg resource004"></div>
                                <div class="farris-doc-resource-card-title">
                                    <a>Farris Design Mobile Axure元件库</a>
                                </div>
                                <div class="farris-doc-resource-card-content">在Axure中使用的元件库</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="farris-doc-resource--bottom-bg">
                <img src="/assets/bg-resource-bottom.png" class="img-block" v-if="curTheme != 'dark'" />
                <img src="/assets/bg-resource-bottom-dark.png" class="img-block" v-if="curTheme == 'dark'" />
            </div>
        </div>
        <slot name="home-features-after" />

        <Content />
    </div>
</template>

<style scoped>
.VPHome :deep(.VPHomeSponsors) {
    margin-top: 112px;
    margin-bottom: -128px;
}

/**背景图先改为img，因为提供的图片大 */

.farris-doc-resource--top-bg,
.farris-doc-resource--bottom-bg {
    /* background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
}
.farris-doc-resource--top-bg {
    /* height: 220px;
    background-image: url('/assets/bg-resource-top.png'); */
}
.farris-doc-resource--bottom-bg {
    /* height: 288px;
    background-image: url('/assets/bg-resource-bottom.png'); */
}
.farris-doc-resource {
    position: relative;
}
.farris-doc-resource--header {
    position: absolute;
    z-index: 10;
    top: -20px;
    color: rgba(255, 255, 255, 0.85);
    padding: 0;
}
.farris-doc-resource--header h2 {
    font-size: 38px;
    margin: 0 0 12px;
    line-height: 53px;
    color: #ffffff;
}
.farris-doc-resource--header-bg {
    position: absolute;
    z-index: -1;
    top: -65px;
    left: 138px;
    width: 136px;
    height: 137px;
    background-image: var(--resource-heaer-bg);
    background-repeat: no-repeat;
    background-size: contain;
}
.farris-doc-resource-wrapper {
    background: var(--resource-bg);
}
.farris-doc-resource-container,
.farris-doc-cmp-intro {
    position: relative;
    display: flex;
    padding: 140px 0 80px 0;
    flex-direction: column;
    margin: 0 auto;
    max-width: var(--vp-layout-max-width);
}
.farris-doc-resource-container--row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
/* @media (min-width: 1440px) {
    .farris-doc-resource-container {
        width: 1248px;
        margin: 10px auto;
    }
} */
.farris-doc-resource-container--row > div {
    margin-bottom: 20px;
    padding-left: 6px;
    padding-right: 6px;
    width: var(--resource-item-width);
}
.farris-doc-resource-card {
    background-color: var(--vp-c-bg-soft);
    box-shadow: var(--vp-shadow-3);
    border-radius: 16px;
    padding: 10px;
    height: 100%;
}
.farris-doc-resource-card:hover {
    box-shadow: 1px 1px 12px 0px rgba(255,255,255,0.5);
}

.resource-bg {
    height: var(--resource-bg-height);
    border-radius: 8px;
    background-repeat: no-repeat;
    background-image: var(--resource-bg-001);
    background-size: contain;
    background-position: center;
}
.resource-bg.resource002 {
    background-image: var(--resource-bg-002);
}
.resource-bg.resource003 {
    background-image: var(--resource-bg-003);
}
.resource-bg.resource004 {
    background-image: var(--resource-bg-004);
}

.farris-doc-resource-card-title {
    font-size: 18px;
    color: var(--vp-c-text-1);
    letter-spacing: -0.5px;
    font-weight: 400;
    margin: 24px 14px 6px 14px;
}

.farris-doc-resource-card-title a {
    color: inherit;
}

.farris-doc-resource-card-title a:hover {
    color: #529dff;
}

.farris-doc-resource-card-content {
    font-size: 14px;
    color: var(--vp-c-text-2);
    letter-spacing: 0;
    font-weight: 400;
    margin: 0 16px 12px;
}
.farris-doc-cmp-intro {
    padding: 80px 0 0px 0;
}
.cmp-intro--header {
    position: relative;
    color: var(--character-bg-text);
}
.cmp-intro--header h2 {
    color: var(--character-title-text);
}
.cmp-intro--header .farris-doc-resource--header-bg {
    left: 80px;
    background-image: url('/assets/bg-resource-header-dark.png');
}

@media (min-width: 768px) {
    .VPHome {
        /* padding-bottom: 128px; */
    }
}
</style>
